import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import {AtTag,AtButton,AtIcon,AtListItem,AtTabs, AtTabsPane} from 'taro-ui'
import './patientdetails.css'
// import reactMixin from 'react-mixin';
// import myJs from './suifangjihuaxiangqingJs.js'
import app from '../../../../main.js'

export default class PatientDetails extends Component {
    config = {
        navigationBarTitleText: '患者详情'
    }
    
    constructor () {
        super(...arguments)
        this.state = {
            patient_id: this.$router.params.id || '', 
            current: 0,
            patientInfo:{
            },
            binglijilu:[
            ],
            wenzhenjilu:[
            ],
            isHas:false
        }
    }
    handleClick (value) {
        this.setState({
            current: value
        })
    }
    //   添加标签
    addTag(){
        app.navigateTo('../setpatienttag/setpatienttag'+'?patient_id='+this.state.patient_id)
    }
    // 去关联
    gotolinkmedical(){
        app.navigateTo('../linkmedical/linkmedical'+'?id='+this.state.patient_id)
    }
    // 联系患者
    gotosuifangdialog(){
        var me = this;
        app.get('web/myself/is_has_order_with_doctor', {doctor_id: app.current.id, patient_id: this.state.patient_id}, function(res) {
            var result = res.data.result;
            if (result.is_has_order) {
                app.navigateTo('../../../chat/pages/Chat/Chat?type='+result.type+'&relate_id='+result.order_id+'&receiver_id='+me.state.patient_id)
            } else {
                app.post('web/flow_order/submitOrder', {patient_id: me.state.patient_id, flow_plan_id: 0}, function(res) {
                    if (res.data.status == 200) {
                        var relate_id = res.data.result.id;
                        app.navigateTo('../../../chat/pages/Chat/Chat?type=随访'+'&receiver_id='+me.state.patient_id+'&relate_id='+relate_id)
                    }
                })
            }
        })
    }
    // 去编辑患者信息
    gotopatientInformation(id){
        app.navigateTo('../../../doctorpages/editPatientInfo/editPatientInfo'+'?id='+id+'&patientInfo='+this.state.patientInfo)
    }
    //去病历详情页
    navtoXiangq (id) {
        app.navigateTo('../../../doctorpages/editCase/editCase?id='+id)
    }

      offect = 0;
      length = 20;
      total = 0;
      offect2 = 0;
      length2 = 20;
      total = 0;
      isFinlsh = false;
  
      //上拉加载
      onReachBottom() {
          if ((this.offect + this.length) < this.total) {
              app.success('正在加载----')
              this.offect = this.offect + this.length;
              this.isFinlsh = false;
              this.getData2();
          } else {
              app.success('没有更多数据了咯')
              this.isFinlsh = true;
          }
          if ((this.offect2 + this.length2) < this.total2) {
            app.success('正在加载----')
            this.offect2 = this.offect2 + this.length2;
            this.isFinlsh = false;
            this.getData3();
        } else {
            app.success('没有更多数据了咯')
            this.isFinlsh = true;
        }
      }
    //   获取数据
    // 患者数据
      getData1(){
        let me = this
        let data = {patient_id:this.state.patient_id}
          app.post('web/patientInquiry/patientDetail',data,function(res){
            let info = res.data.result;
            info.city = !app.isEmpty(info.city) ? info.city : '';
            me.setState({
                patientInfo: info,
                isHas:true
              })
          })
      }
    //   病历记录
      getData2(){
        let me = this
        let data = {offset:this.offect,length:this.length,patient_id:this.state.patient_id}
        // let data = {offset:this.offect,length:this.length,patient_id:1}
        let dataArray = []
        app.post('web/medicalRecords/medicalRecordList',data,function(res){
            dataArray = me.state.binglijilu.concat(res.data.result.list)
            me.total = res.data.result.total
            me.setState({
              binglijilu:dataArray
            })
        })
      }
    //   问诊记录
      // getData3(){
      //   let me = this
      //   let data = {offset:this.offect2,length:this.length2,patient_id:this.state.patient_id}
      //   // let data = {offset:this.offect2,length:this.length2,patient_id:1}
      //   let dataArray = []
      //   app.post('web/myself/myAdviceList',data,function(res){
      //       dataArray = me.state.wenzhenjilu.concat(res.data.result.list)
      //       me.total = res.data.result.total
      //       me.setState({
      //         wenzhenjilu:dataArray
      //       })
      //   })  
      // }
      getData3(){
        let me = this
        let data = {offset:this.offect,length:this.length,patient_id:this.state.patient_id}
        // let data = {offset:this.offect,length:this.length,patient_id:1}
        let dataArray = []
        app.post('web/medicalRecords/medicalRecordList',data,function(res){
            dataArray = res.data.result.list
            me.setState({
              binglijilu:dataArray
            })
        })
      }
    
    componentWillMount(){
        let pid = this.$router.params.id
        this.setState({
            patient_id:pid,
            binglijilu: [],
            wenzhenjilu: []
        })
    }
    componentDidMount(){
        this.getData1()
        // this.getData2()
        // this.getData3()
    }

    componentDidShow(){
      if (this.state.isHas) {
        this.getData1()
      }
      this.getData3()
    }

    toFLow(flow_id, patient_id) {
        if (flow_id == 0) {
            app.navigateTo('../suifangjihua/suifangjihua?patient_id='+patient_id+'&from_page=flow');
        } else {
            app.navigateTo('../suifangjihuaxiangqing/suifangjihuaxiangqing?id='+flow_id);
        }
    }

    render () {
        // 标签循环
        let patientInfo = this.state.patientInfo

        let tags = patientInfo.labels.map((tag)=>{
            return  <View className='at-col at-col-1 at-col--auto text-box'>
                        <AtTag className='tag-text'>{tag.name}</AtTag>
                    </View>
        })

        let bingli = this.state.binglijilu.map((item)=>{
            return <View className='medical-record' onClick={this.navtoXiangq.bind(this,item.id)}>
                       <View className='first-line'>
                            <Text className='fl name'>{item.patient_name}</Text>
                            <Text className='fl'>{item.gender}</Text>
                            <Text className='fl'>{item.age}岁</Text>
                        </View>
                        <View className='second-line'>
                           {item.diagnosis == null
                            ? '' 
                            : item.diagnosis
                            }
                        </View>
                        <View className='third-line'>
                            <View className='float'>
                                <AtIcon value='bullet-list' size='22' color='#cccccc' className='icon'></AtIcon>{item.code}
                            </View>
                            <View className='float'>
                                <AtIcon value='calendar' size='20' color='#cccccc' className='icon'></AtIcon> {item.created_at}
                            </View> 
                        </View>
                    </View>
        })

        // let wenzhen = this.state.wenzhenjilu.map((item2)=>{
        //     return <View className='talk-record'>
        //                 <View className='first-line'>
        //                     <Text className='question'>{item2.sender_name}的咨询</Text>
        //                     <Text className='date'>{item2.sender_name}</Text>
        //                 </View>
        //                 <View className='second-line'>
        //                     <Text className='content'>{item2.content}</Text>
        //                     <Text className='status'>{item2.status}</Text>
        //                 </View>
        //             </View>
        // })
        return (
            <View className='patient-details'>
               <View className='patient'>
                    <Image 
                        className='head' 
                        src={patientInfo.head_image}
                    >
                    </Image>
                    <View className='info'>
                        <View className='top'>
                            {patientInfo.name}
                            <Text className='more-info'>添加于{patientInfo.created_at}</Text>
                        </View>
                        <View className='bottom'>
                            <Text className='infos'>{patientInfo.gender}</Text>
                            <Text className='infos'>{patientInfo.age}岁</Text>
                            <Text className='infos'>{patientInfo.city}</Text>
                            <Text className='infos phone'>{patientInfo.phone}</Text>
                        </View>
                    </View>
                    {/* <AtIcon className='icon' value='chevron-right' size='30' color='#cdcdcd' onClick={this.gotopatientInformation.bind(this,patientInfo.id)}></AtIcon> */}
                </View>
                <View className='title'>
                    患者标签
                </View>
                <View className='at-row at-row--wrap tags'>
                    {tags}
                    <View className='at-col at-col-1 at-col--auto text-box'><AtTag className='tag-text' onClick={this.addTag.bind(this)}>+添加标签</AtTag></View>
                </View>
                <AtListItem hasBorder={false} className='plan-title' title='随访计划' extraText={patientInfo.flow_status.name} arrow='right' onClick={this.toFLow.bind(this, patientInfo.flow_status.id, patientInfo.id)} />
                {/*<AtTabs 
                    current={this.state.current} 
                    tabList={[{ title: '病历记录' }, { title: '问诊记录' }]} 
                    onClick={this.handleClick.bind(this)} 
                >
                    <AtTabsPane current={this.state.current} index={0} >
                       {bingli}
                    </AtTabsPane>
                    <AtTabsPane current={this.state.current} index={1}>
                        {wenzhen}
                    </AtTabsPane>
                </AtTabs>*/}
                <AtListItem hasBorder={false} className='plan-title' title='病历记录'/>
                {bingli}
                <View className='blank-box'></View>
                <View className='at-row btn-box'>
                    <View className='at-col at-col-6'>
                        <AtButton type='primary' full={true} className='cancel-btn' onClick={this.gotolinkmedical.bind(this)}>关联病历</AtButton> 
                    </View>
                    <View className='at-col at-col-6'>
                        <AtButton type='primary' full={true} className='update-btn' onClick={this.gotosuifangdialog.bind(this)}>联系患者</AtButton> 
                    </View>
                </View>
            </View>
        );
    }
}
// reactMixin.onClass(Suifangjihuaxiangqing,myJs);